<div class="importDatabase ">
    <div class="panel padding padding-md" data-bind="visible: $root.activeDatabase().isSharded()">
        <div>
            <div class="empty-set text-center margin-top-sm margin-bottom-sm mx-auto">
                <i class="icon-disabled text-warning icon-xl m-0"></i>
                <div class="lead">
                    <div class="vstack gap-3">
                        <span>
                            <div class="rounded-pill badge bg-faded-warning">
                                Feature not available
                            </div>
                        </span>
                        <span>
                            Import documents from a CSV file into a collection is not available for
                            <i class="icon-sharding text-shard m-0"></i> sharded databases
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel" data-bind="visible: !$root.activeDatabase().isSharded()">
        <div class="panel-body">
            <form class="flex-form" data-bind="submit: importCsv">
                <h3>Import documents from a CSV file into a collection</h3>
                <div class="row">
                    <div class="col-lg-6">
                        <hr class="margin-top"/>
                        <h4>Define source and destintaion</h4>
                        <div class="form-group margin-top margin-left">
                            <label for="importCsvFilePicker" class="control-label">Import from File<i class="required"></i></label>
                            <div class="flex-grow">
                                <div class="input-group file-input" data-bind="validationElement: importedFileName">
                                    <input type="file" accept=".csv" id="importCsvFilePicker" data-bind="event: { change: _.partial(fileSelected, $element.value) }, disable: isImporting" tabindex="-1">
                                    <span class="static-name form-control" data-bind="text: importedFileName() || 'Select file...'"></span>
                                    <span class="input-group-btn">
                                    <label for="importCsvFilePicker" class="btn btn-default">
                                        <i class="icon-document"></i><span>Browse</span>
                                    </label>
                                </span>
                                    <p class="help-block" data-bind="validationMessage: importedFileName"></p>
                                </div>
                                <div class="bg-info text-info padding padding-xs margin-top margin-top-sm flex-horizontal">
                                    <div class="flex-start">
                                        <small><i class="icon-info"></i></small>
                                    </div>
                                    <div>
                                        <ul class="no-margin">
                                            <li><small>CSV file must contain headers.</small></li>
                                            <li><small>Each column will be treated as a property.</small></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group margin-top margin-left">
                            <label for="csvImportCollection" class="control-label">Import to Collection</label>
                            <div class="flex-grow">
                                <input placeholder="Enter collection name (only if doesn't exist in file)" class="form-control" type="text" name="csvImportCollection" id="csvImportCollection" 
                                       data-bind="textInput: customCollectionName" autocomplete="off" />
                                <div class="bg-info text-info padding padding-xs margin-top margin-top-sm flex-horizontal">
                                    <div class="flex-start">
                                        <small><i class="icon-info"></i></small>
                                    </div>
                                    <div>
                                        <ul class="no-margin">
                                            <li><small>The Collection name will be derived from the CSV file column <strong>@metadata.@collection</strong> - if it exists.</small></li>
                                            <li><small>Else, you can enter a collection name here.</small></li>
                                            <li><small>If not specified, then the collection name will be derived from the CSV file name.</small></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr class="margin-top margin-top-md"/>
                        <h4>CSV options</h4>
                        <div class="margin-left margin-top">
                            <div class="form-group">
                                <label class="control-label">Fields Delimiter</label>
                                <div class="flex-grow" data-bind="with: csvConfig">
                                    <button class="btn btn-block dropdown-toggle text-left" data-toggle="dropdown">
                                        <span data-bind="text: delimiter"></span>
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" data-bind="foreach: constructor.possibleDelimiters">
                                        <li>
                                            <a href="#" data-bind="text: $data, click: _.partial($parent.delimiter)"></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="margin-left">
                            <div class="form-group" data-bind="with: csvConfig">
                                <label class="control-label">Text Qualifier</label>
                                <div class="flex-grow">
                                    <button class="btn btn-block dropdown-toggle text-left" data-toggle="dropdown">
                                        <span data-bind="text: quote"></span>
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" data-bind="foreach: constructor.possibleQuoteChars">
                                        <li>
                                            <a href="#" data-bind="text: $data, click: _.partial($parent.quote)"></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="margin-left">
                            <div class="form-group" data-bind="with: csvConfig">
                                <label class="control-label">Whitespace</label>
                                <div class="flex-grow">
                                    <button class="btn btn-block dropdown-toggle text-left" data-toggle="dropdown">
                                        <span data-bind="text: trimOption"></span>
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" data-bind="foreach: constructor.possibleTrimOptions">
                                        <li>
                                            <a href="#" data-bind="text: $data, click: _.partial($parent.trimOption)"></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="margin-left">
                            <div class="form-group" data-bind="with: csvConfig">
                                <label class="control-label margin-left margin-left-sm"></label>      
                                <div class="toggle">
                                    <input id="allowComments" type="checkbox" data-bind="checked: allowComments"/>
                                    <label for="allowComments">Allow Comments</label>
                                </div>
                                <div class="flex-grow margin-left" data-bind="validationElement: commentCharacter">
                                    <input type="text" class="form-control" placeholder="Enter comment character"
                                           data-bind="textInput: commentCharacter, disable: !allowComments()" autocomplete="off">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <hr />
                <div class="progress" data-bind="visible: isUploading()">
                    <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" data-bind="style: { width: uploadStatus() + '%' }"> <span class="sr-only" data-bind="text: uploadStatus() + '%'"></span> </div>
                </div>
                <div>
                    <button class="btn btn-primary" type="submit" data-bind="css: { 'btn-spinner': isImporting() }"><span class="icon-import"></span> <span>Import Collection</span></button>                  
                </div>
            </form>
        </div>
    </div>
</div>
